<!-- components/WeekOfMonth.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  // 可以添加 props 来控制周起始日等参数
  weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 // 0: 周日, 1: 周一, ..., 6: 周六
}

const props = withDefaults(defineProps<Props>(), {
  weekStart: 1 // 默认从周一开始计算
})

const currentWeekOfMonth = ref<number>(0)

/**
 * 计算当前是本月第几周
 * @param weekStart 周起始日 (0-6, 0是周日)
 */
const calculateWeekOfMonth = (weekStart: number = 1) => {
  const now = new Date()
  const year = now.getFullYear()
  const month = now.getMonth()
  const today = now.getDate()
  
  // 获取本月第一天
  const firstDay = new Date(year, month, 1)
  // 获取本月第一天是周几（0-6）
  const firstDayOfWeek = firstDay.getDay()
  
  // 调整周起始日
  const adjustedFirstDay = (firstDayOfWeek - weekStart + 7) % 7
  
  // 计算今天是本月第几天
  const dayOfMonth = today
  
  // 计算周数
  const weekNum = Math.ceil((dayOfMonth + adjustedFirstDay) / 7)
  
  return weekNum
}

// 使用计算属性来响应式更新周数
const weekNumber = computed(() => {
  return calculateWeekOfMonth(props.weekStart)
})

// 初始化时计算一次
currentWeekOfMonth.value = weekNumber.value
</script>

<template>
  <!-- 这个组件可以渲染内容，或者只是提供数据 -->
  <slot :weekNumber="weekNumber">
    <view v-if="$slots.default">
      <slot :weekNumber="weekNumber"></slot>
    </view>
    <view v-else>
      当前是本月第 {{ weekNumber }} 周
    </view>
  </slot>
</template>